<template>
  <h2 class="title">社区发现</h2>
  <div id="chart" style="width: 100%; height: 650px;"></div>
  <el-input style="width: 100px;margin-right: 10px;" v-model="time"></el-input>
  <el-button type="success" @click="sendRequest">确认</el-button>
</template>

<script lang="ts">
export default {
  name: "graph"
}
</script>

<script lang="ts" setup>
import {onMounted, onUnmounted, getCurrentInstance, reactive, ref} from "vue"
import {resize} from '@/utils/resize'
import {getGraph, getGraphByTime} from "@/api/graphRequest.js";
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance()

const time = ref('')

let chart;

const successMsg = () => {
  ElMessage({
    showClose: true,
    message: '成功！',
    type: 'success',
  })
}

const errorMsg = () => {
  ElMessage({
    showClose: true,
    message: '失败！请检查网络环境！',
    type: 'error',
  })
}

const sendRequest = () => {
  getGraphByTime(time.value).then((res: any) => {
    if (res.status === 200) {
      successMsg();
      option.series[0].data = res.data.nodes;
      option.series[0].links = res.data.links;
      option.series[0].categories = res.data.categories;
      option.legend = [
        {
          // selectedMode: 'single',
          data: res.data.categories.map(function (a) {
            return a.name;
          })
        }
      ];
      chart = proxy.$echarts.init(document.getElementById("chart"), 'walden');
      // init(chart);
      chart.setOption(option);
      // resize(chart);
    } else {
      errorMsg();
    }
  })
}


interface Categories {
  name: string,
}

interface Links {
  source: string,
  target: string,
}

interface Nodes {
  id: string;
  name: string,
  symbolSize: number,
  x: number,
  y: number,
  value: number,
  category: number,
}

interface GraphType {
  categories: Categories[],
  nodes: Nodes[],
  links: Links[]
}


let graph: GraphType = reactive({
  categories: [],
  nodes: [],
  links: [],
});

const option = {
  // title: {
  //   text: '社区发现',
  //   subtext: 'Default layout',
  //   top: 'bottom',
  //   left: 'right'
  // },
  tooltip: {},
  legend: [
    {
      // selectedMode: 'single',
      data: graph.categories.map(function (a) {
        return a.name;
      })
    }
  ],
  series: [
    {
      name: '社区发现图',
      type: 'graph',
      layout: 'force',
      data: graph.nodes,
      links: graph.links,
      categories: graph.categories,
      roam: true,
      label: {
        position: 'right'
      },
      force: {
        repulsion: 10,
      }
    }
  ]
};

onMounted(() => {
  chart = proxy.$echarts.init(document.getElementById("chart"), 'walden');
  init(chart);
  console.log(option);
  show(chart);
  resize(chart);
})

onUnmounted(() => {
  clearInterval(interval)
})

getGraph().then((res: any) => {
  if (res.status === 200) {
    option.series[0].data = res.data.nodes;
    option.series[0].links = res.data.links;
    option.series[0].categories = res.data.categories;
    option.legend = [
      {
        // selectedMode: 'single',
        data: res.data.categories.map(function (a) {
          return a.name;
        })
      }
    ];
  }
})


let interval: any = null;

const show = (chart: any) => {
  interval = setTimeout(() => {
    chart.setOption(option);
  }, 1000);
}

const init = (chart: any) => {
  chart.setOption(option)
}

</script>

<style scoped>
.title {
  color: indianred;
  font-size: large;
  letter-spacing: 0.2em;
  margin: 10px;
}
</style>